<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收退款记录</title>
    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/hotui/css/font-awesome.min.css" th:href="@{/resource/hotui/css/font-awesome.min.css}"
          rel="stylesheet">
    <!-- Morris -->
    <link href="../../resource/hotui/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/hotui/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="animated fadeInRight" th:replace="fragments/order_detail_front_fg::orderDetailCopy"
     style="padding:0 6px;position:fixed;width:100%;top: 0;z-index:101;">
    <div class="col-lg-12">
        <div class="ibox float-e-margins" style="margin-bottom:0;">
            <div class="ibox-title" style="padding: 14px 15px 11px;">
                <div class="form-inline">
                    <div class="form-group m-r-sm">
                        <label style="font-size: 17px; margin-top: 5px;">
                            订单-<span>20170110095434456651</span>

                            <span style="font-size: 13px;">
                                <span class="color-primary">已支付</span>
                                <span class="color-warning">待发货</span>
                            </span>
                        </label>
                    </div>
                    <button type="button"

                            onclick="handler.deliver('123213')" class="btn btn-success btn-sm">
                        发货
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight tooltip-demo" style="margin-top: 59px;">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="tabs-container">
                    <ul class="nav nav-tabs" th:replace="fragments/order_detail_front_fg::orderDetailTab(2)">
                        <li><a href="order_detail.html">基本信息</a></li>
                        <li class="active"><a href="order_detail.html">收退款记录</a></li>
                        <li><a href="order_detail.html">发货记录</a></li>
                        <li><a href="order_detail.html">返利记录</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="ibox float-e-margins m-b-none">
                                            <div class="ibox-content p-xxs no-borders" style="border-top: none;">
                                                <table class="table table-bordered table-hover table-center">
                                                    <thead>
                                                    <tr>
                                                        <th>发货单号</th>
                                                        <th>收件人</th>
                                                        <th>物流单号</th>
                                                        <th>物流公司</th>
                                                        <th>物流费用</th>
                                                        <th>是否签收</th>
                                                        <th>签收时间</th>
                                                        <th sec:authorize="hasRole('ADMIN')">自动签收</th>
                                                        <th>创建时间</th>
                                                        <th>操作</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>

                                                    <tr th:each="bill:${bills}">
                                                        <td th:text="${bill.id}"></td>
                                                        <td>
                                                            <span th:text="${bill.receivingInfo.userName}">gmw</span><br>
                                                            <span th:text="${bill.receivingInfo.telNumber}">14465655545</span>
                                                        </td>
                                                        <td th:text="${bill.expressNo}">10.0</td>
                                                        <td th:text="${bill.expressCom}">收货人</td>
                                                        <td th:text="${bill.freightAmount}">顺丰</td>
                                                        <td class="color-primary"
                                                            th:class="${bill.received?'color-primary':'color-warning'}"
                                                            th:text="${bill.received?'已签收':'待签收'}">已签收
                                                        </td>
                                                        <td>
                                                            <span th:if="${bill.receivedTime!=null}"
                                                                  th:text="${#temporals.format(bill.receivedTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                                                        </td>
                                                        <td sec:authorize="hasRole('ADMIN')">
                                                            <span th:if="${bill.lastReceivedTime!=null}"
                                                                  th:text="${#temporals.format(bill.lastReceivedTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                                                        </td>
                                                        <td th:text="${#temporals.format(bill.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                                                        <td>
                                                            <a th:href="|javascript:listHandler.queryTrackModal('${bill.id}')|"
                                                               href="javascript:listHandler.queryTrackModal()">物流</a>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="query_track_modal">
    <div class="ibox float-e-margins" style="width: 520px;max-height: 450px;overflow: auto;">
        <input type="hidden" id="track_bill_id"/>
        <div class="ibox-content timeline">
            <div class="timeline-item" id="track_content">

            </div>
        </div>
    </div>
</script>

<script type="text/html" id="track_content_template">
    <div class="row">
        <div class="col-lg-4" style="margin-top: 10px;">
            {{time}}
        </div>
        <div class="col-lg-8 content no-top-border" style="min-height: 60px;">
            <p class="m-b-xs"><strong>{{context}}</strong>
            </p>
        </div>
    </div>
</script>

<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js(123123)}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js"></script>

<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>

<script type="text/javascript" th:inline="javascript">
    const deliverUri = /*[[@{/order/deliver}]]*/  "deliver.html";
    const apiUri = /*[[@{/order/deliver}]]*/  "";
</script>
<script type="text/javascript">
    var queryModal = $("#query_track_modal").modal("查看物流", function () {
        return true;
    }, {
        offset: '70px',
        yes: function (index) {
            layer.close(index);
        },
        btn: ["关闭"]
    });
    var listHandler = {
        queryTrackModal: function (id) {
            queryModal.show(function () {
                hot.ajax(apiUri + "/queryTrack", {
                    id: id
                }, function (apiResult) {
                    $("#track_content").empty();
                    if (apiResult.resultCode === 2000) {
                        if (apiResult.data.length === 0) {
                            $("#track_content").html("暂时无法查到相关物流信息");
                        }
                        $.each(apiResult.data, function (o, item) {
                            let tempHtml = $("#track_content_template").html();
                            tempHtml = tempHtml.replace('{{time}}', item.time);
                            tempHtml = tempHtml.replace('{{context}}', item.context);

                            $("#track_content").append(tempHtml);
                        });
                    } else {
                        $("#track_content").html("暂时无法查到相关物流信息");
                    }
                }, function () {
                }, "post");
            });
        }
    }
</script>
</body>

</html>
